<template>
  <div class="header-wrapper">
    <div class="logo-wrapper">
      <img class="logo" :src="logo" />
      <i class="light"></i>
    </div>
  </div>
</template>
<script>
export default {
  name: 'layout-header',
  data () {
    return {
      logo: require('@/assets/logo.png')
    }
  }
}
</script>
<style scoped lang="less">
.header-wrapper{
  height: 50px;
  line-height:50px;
  margin-left: 4px;
}
.logo-wrapper{
  display:inline-block;
  position:relative;
  cursor: pointer;
  .logo {
    height:46px;
    margin-top: 2px;
  }
  .light {
    cursor: pointer;
    position: absolute;
    left: -180px;
    top: 0;
    width: 180px;
    height: 90px;

    background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    background-image: -o-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    background-image: -ms-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    background-image: linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));

    -webkit-transform: skewx(-25deg);
    -moz-transform: skewx(-25deg);
    -o-transform: skewx(-25deg);
    -ms-transform: skewx(-25deg);
    transform: skewx(-25deg);
  }
  &:hover .light {
    left: 180px;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
  }
}

</style>
